<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script th:inline="javascript"> var ctx = [[@{
        /}]]; </script>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: white;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            color: white;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
        }

        video {
            object-fit: cover;
        }

        img, video {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper" id="swiperBox">
    </div>
</div>
<!-- Initialize Swiper -->
<script>
    var prefix = ctx + "file";
    window.onload = function () {
        var md;
        var utils = {
            state: {
                picTime: 2,// 图片时间
                textTime: 2,// 文字时间
                data: [],
            },
            countDown: function (count, callback) {
                var times = setInterval(function () {
                    if (count > 0) {
                        count--;
                    } else {
                        clearInterval(times)
                        if (callback) callback();
                    }

                }, 1000);
            },
            picEle: function (data = {}, index) {
               // var urls = "/profile/" +  "${data.fileName}" +"." +"${data.suffix}";
                return `<div class="swiper-slide" style="background: white"><img src="${data.ur}" alt=""></div>`;
            },
            videoEle: function (data = {}, index) {
                //var urls = "/profile/" +  "${data.fileName}" +"." +"${data.suffix}";
                return `<div class="swiper-slide" style="background: white">
                    <video id="media${index}" class="media${index}" width="100%" height="100%" muted>
                      <source src="${data.ur}">
                    </video>
                  </div>`;
            },
            textEle: function (data = {}, index) {
                return `<div class="swiper-slide" style="background: blue">
                  ${data.content}
                </div>`;
            },
            getChildEle: function (data = []) {
                var childEle = '';
                for (var i = 0; i < data.length; i++) {
                    if (data[i].type == 0) {
                        childEle += utils.picEle(data[i]);
                    } else if (data[i].type == 1) {

                        childEle += utils.videoEle(data[i], i);
                    } else if (data[i].type == 2) {

                        childEle += utils.textEle(data[i]);
                    }
                }
                return childEle;
            },
            getListData: function () {
                $.ajax({
                    url: prefix + "/listOrder?channelId="+2,
                    type: "get",
                    async: false,//同步
                    data: {},//传出的数据
                    dataType: "json",//返回的数据类型，常用：html/text/json
                    success: function (data) {
                        utils.state.data = data.rows;
                        var parentEle = document.getElementById("swiperBox");
                        parentEle.innerHTML = utils.getChildEle(utils.state.data);
                    }
                })
            },
            // mockListData: function(){
            //   // utils.state.data = [
            //   //     {
            //   //       "searchValue": null,
            //   //       "createBy": null,
            //   //       "createTime": null,
            //   //       "updateBy": null,
            //   //       "updateTime": null,
            //   //       "remark": "",
            //   //       "params": {},
            //   //       "id": 1,
            //   //       "fileName": "图片1",
            //   //       "type": 0,
            //   //       "ur": "http://img3.duitang.com/uploads/item/201608/13/20160813093241_UiKmA.jpeg",
            //   //       "content": "",
            //   //       "order": 1
            //   //     },
            //   //     {
            //   //       "searchValue": null,
            //   //       "createBy": null,
            //   //       "createTime": null,
            //   //       "updateBy": null,
            //   //       "updateTime": null,
            //   //       "remark": "",
            //   //       "params": {},
            //   //       "id": 1,
            //   //       "fileName": "图片1",
            //   //       "type": 0,
            //   //       "ur": "https://b-ssl.duitang.com/uploads/item/201505/23/20150523152813_r28Vk.jpeg",
            //   //       "content": "",
            //   //       "order": 1
            //   //     },
            //   //     {
            //   //       "searchValue": null,
            //   //       "createBy": null,
            //   //       "createTime": null,
            //   //       "updateBy": null,
            //   //       "updateTime": null,
            //   //       "remark": "",
            //   //       "params": {},
            //   //       "id": 3,
            //   //       "fileName": "视频1",
            //   //       "type": 1,
            //   //       "ur": "http://www.w3school.com.cn/example/html5/mov_bbb.ogg",
            //   //       "content": "",
            //   //       "order": 3
            //   //     },
            //   //     {
            //   //       "searchValue": null,
            //   //       "createBy": null,
            //   //       "createTime": null,
            //   //       "updateBy": null,
            //   //       "updateTime": null,
            //   //       "remark": "",
            //   //       "params": {},
            //   //       "id": 1,
            //   //       "fileName": "图片1",
            //   //       "type": 0,
            //   //       "ur": "http://b-ssl.duitang.com/uploads/item/201410/03/20141003171521_uPuJN.thumb.700_0.jpeg",
            //   //       "content": "",
            //   //       "order": 1
            //   //     },
            //   // ]
            //   var parentEle = document.getElementById("swiperBox");
            //   parentEle.innerHTML = utils.getChildEle(utils.state.data);
            // }
        };

        utils.getListData()

        var mySwiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            effect: 'fade',
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            width: window.innerWidth,
            height: window.innerHeight,
            on: {
                init: function () {
                    //Swiper初始化了
                    document.body.click();
                    document.body.click();
                },
                slideChangeTransitionEnd: function () {
                    document.body.click();
                    document.body.click();
                    this.myActiveIndex = this.activeIndex > utils.state.data.length ? 1 : this.activeIndex;
                    if (utils.state.data[this.myActiveIndex - 1].type == 0) {
                        utils.countDown(utils.state.picTime, function () {
                            mySwiper.slideNext()
                        });

                    } else if (utils.state.data[this.myActiveIndex - 1].type == 1) {
                        // md = document.getElementById("media" + (this.myActiveIndex-1));
                        console.log(this.activeIndex)
                        console.log(utils.state.data.length)
                        if (this.activeIndex >= utils.state.data.length) {
                            md1 = document.querySelectorAll(`.media${this.myActiveIndex - 1}`)[1];
                            md1.currentTime = 0;
                            md1.removeAttribute('muted')
                            md1.play();
                            md1.addEventListener("ended", function () {
                                md1.currentTime = 0;
                                mySwiper.slideNext();
                            })
                        } else {
                            md = document.querySelectorAll(`.media${this.myActiveIndex - 1}`)[0];
                            md.currentTime = 0;
                            md.removeAttribute('muted')
                            md.play();
                            md.addEventListener("ended", function () {
                                md.currentTime = 0;
                                mySwiper.slideNext();
                            })
                        }

                    } else if (utils.state.data[this.myActiveIndex - 1].type == 2) {
                        utils.countDown(utils.state.textTime, function () {
                            mySwiper.slideNext()
                        })

                    } else {
                        utils.countDown(utils.state.picTime, function () {
                            mySwiper.slideNext()
                        })

                    }
                },
            },
        });

    }

</script>
</body>
</html>